import React, { useEffect, useRef, useState } from "react";
// 组件接口定义
interface LazyImageProps {
  src: string;
  alt?: string;
}
// 组件的状态和引用
const LazyImage: React.FC<LazyImageProps> = ({ src, alt }) => {
  const [imageSrc, setImage] = useState("/public/image/bg.png");
  const imageRef = useRef(null);
  // - **`imageSrc`**：使用 `useState` 定义一个状态，初始值为一个加载中的 GIF 图片 URL。
  // 这个状态用于存储实际要显示的图片 URL。
  // - **`imageRef`**：使用 `useRef` 创建一个引用，用于指向图片元素，以便在后续的 Intersection Observer 中进行观察
  // 使用 `useEffect` 进行懒加载逻辑
  useEffect(() => {
    const io = new IntersectionObserver((arr) => {
      if (arr[0].isIntersecting) {
        setImage(src);
        io.disconnect(); // 断开观察，避免多次加载
      }
    });
    if (imageRef.current) {
      io.observe(imageRef.current);
    }
    return () => {
      io.disconnect(); // 清理观察者
    };
  }, []);
  // - **`useEffect`**：在组件挂载时执行，创建一个 `IntersectionObserver` 实例。
  // - **`IntersectionObserver`**：用于观察 `imageRef` 指向的图片元素是否进入视口。
  //   - 当图片进入视口时（`isIntersecting` 为 `true`），调用 `setImageSrc(src)` 来更新状态，加载实际的图片。
  // - 调用 `io.disconnect()` 断开观察，避免重复加载。
  // - **清理函数**：在组件卸载时，确保断开观察者，防止内存泄漏。
  // 错误处理
  const onError = () => {
    setImage("/public/image/bg.png");
  };
  // - **`onError`**：定义一个错误处理函数，当图片加载失败时调用，更新 `imageSrc` 为一个备用的错误图片 URL。
  return (
    //  渲染组件
    <div>
      <img ref={imageRef} src={imageSrc} alt={alt} onError={onError} />
    </div>
    // - **渲染**：返回一个包含标题和图片的 `div`。
    // 图片的 `src` 属性绑定到 `imageSrc` 状态，`alt` 属性绑定到传入的 `alt` 值，`onError` 事件处理函数用于处理加载错误。
  );
};
export default LazyImage;
